<template>
  <div id="linechart">
    <div id="main" style="height:400px; margin:50px auto;"></div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
import {echartshttp} from '../../http/requset'
export default {
  name: "LineChart",
  data() {
    return {
      charts: "",
    };
  },

  methods: {
    drawLine(id) {
      echartshttp()
        .then((res) => {
          console.log(res);
          // console.log(res.data.legend.data);
          // console.log(res.data.xAxis[0].data);
          this.charts = echarts.init(document.getElementById(id));
          // this.btCharts = echarts.init(document.getElementById(id));
          this.charts.setOption({
            title: {
              text: "用户来源",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#E9EEF3",
                },
              },
            },
            legend: {
              data:res.data.data.legend.data
              },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data:res.data.data.xAxis[0].data,
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series:res.data.data.series
          });

            // 柱状图
        //      this.btCharts.setOption({

        //     tooltip: {
        //       trigger: "axis",
        //       axisPointer: {
        //         type: "shadow",
        //       },
        //     },
        //     legend: {
        //       data:res.data.legend.data,
        //     },
        //     toolbox: {
        //       show: true,
        //       orient: "vertical",
        //       left: "right",
        //       top: "center",
        //       feature: {
        //         saveAsImage:{}
        //       },
        //     },
        //       grid: {
        //       left: "3%",
        //       right: "4%",
        //       bottom: "3%",
        //       containLabel: true,
        //     },
        //     xAxis: [
        //       {
        //         type: "category",
        //         axisTick: { show: false },
        //         data: res.data.xAxis[0].data,
        //       },
        //     ],
        //     yAxis: [
        //       {
        //         type: "value",
        //       },
        //     ],
        //     series:res.data.series
        // });
  //调用


        })
    }
  },

    mounted() {
    this.$nextTick(function () {
      this.drawLine("main");
    });
  },
}

</script>

<style scoped>

</style>